<template>
  <div style="color: #FFFFFF;">
    <el-table :data="tableData2" style="width: 100%">
      <el-table-column prop="shiftName" label="姓名" width="100"></el-table-column>
      <el-table-column
        :label="`周${zhCn(tableindex+1)}  ${currentDays[tableindex]}`"
        v-for="(item, tableindex) in 7"
        :key="tableindex"
      >
        <el-table-column label="上午" >
          <template slot-scope="scope">
            <el-dropdown trigger="click" @command="dropdownClick">
              <span
                class="el-dropdown-link"
                :style="getColor(scope.row.week[tableindex] ? scope.row.week[tableindex].morning : '')"
              >{{ scope.row.week[tableindex] ? scope.row.week[tableindex].morning : '' | getShowValue}}</span>
              <el-dropdown-menu slot="dropdown">
                <!-- {dropIndex : 选择的index , tableRow:table行 , tableCol : table列 , date : 早上还是晚上} -->
                <el-dropdown-item
                  v-for="(item, index) in roleList"
                  :key="index"
                  :command="{dropIndex : roleList[index].value , tableRow:scope.$index , tableCol : tableindex , date : 'morning'}"
                >{{item.label}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column label="下午" >
          <template slot-scope="scope">
            <el-dropdown trigger="click" @command="dropdownClick">
              <span
                class="el-dropdown-link"
                :style="getColor(scope.row.week[tableindex] ? scope.row.week[tableindex].morning : '')"
              >{{scope.row.week[tableindex] ? scope.row.week[tableindex].afternoon : '' | getShowValue}}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in roleList"
                  :key="index"
                  :command="{dropIndex :  roleList[index].value , tableRow:scope.$index , tableCol : tableindex , date : 'afternoon'}"
                >{{item.label}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import DateTimeUtils from "@/common/utils/dateTimeUtils";
import uSchedul from "@/api/uSchedulApi";
export default {
  name: "Table",
  data() {
    return {
      // 模拟数据
      tableData2: [
      ],
      roleList: [
        {
          label: "请假",
          value: "-1",
          disabled: false,
        },
        {
          label: "休假",
          value: "0",
          disabled: false,
        },
        {
          label: "上班",
          value: "1",
          disabled: false,
        },
      ],
      value: "",
    };
  },
  props: {
    currentWeek: {
      type: Number,
      require: true,
    },
  },
  computed: {
    currentDays() {
      return DateTimeUtils.getLastDays(this.currentWeek);
    },
  },
  watch: {
    currentWeek: {
      immediate: true,
      handler() {
        uSchedul
          .uSchedulList(...DateTimeUtils.getNextWeek(this.currentWeek))
          .then((res) => {
            DateTimeUtils.getLastDays(0);
            this.tableData2 = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  },
  filters: {
    getShowValue(value) {
      let roleList = [
        {
          label: "请假",
          value: "-1",
          disabled: false,
        },
        {
          label: "休假",
          value: "0",
          disabled: false,
        },
        {
          label: "上班",
          value: "1",
          disabled: false,
        },
      ];
      for (let item of roleList) {

        if (item.value === value) {
          return item.label;
        }
      }
      return "";
    },
  },
  mounted() {
    uSchedul
      .uSchedulList(...DateTimeUtils.getNextWeek(this.currentWeek))
      .then((res) => {
        this.tableData2 = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    // 点击选择
    dropdownClick(params) {
      let { tableCol, tableRow, dropIndex, date } = params;
      let postData = {
        shiftName: this.tableData2[tableRow].shiftName,
        shiftDate: this.tableData2[tableRow].week[tableCol].shiftDate,
      };
      postData[date] = dropIndex;
      uSchedul
        .postSchedulData(postData)
        .then((res) => {
          if (res.data.status === "200") {
            uSchedul
              .uSchedulList(...DateTimeUtils.getNextWeek(this.currentWeek))
              .then((res) => {
                console.log(res);
                this.tableData2 = res.data.data;
              })
              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          alert("修改失败");
        });
    },
    zhCn(index) {
      switch (index) {
        case 1:
          return "一";
          break;
        case 2:
          return "二";
          break;
        case 3:
          return "三";
          break;
        case 4:
          return "四";
          break;
        case 5:
          return "五";
          break;
        case 6:
          return "六";
          break;
        case 7:
          return "日";
          break;
        default:
          return "";
          break;
      }
    },
    // 背景颜色
    getColor(value) {
      let roleList = [
        {
          value: "-1",
          color: "rgba(236, 128, 141)",
        },
        {
          value: "0",
          color: "rgba(128, 128, 255)",
        },
        {
          value: "1",
          color: "",
        },
      ];
      for (let item of roleList) {
        if (item.value === value) {
          return { background: item.color };
        }
      }
      return {};
    },
  },
};
</script>
<style scoped lang="less">
.el-dropdown-link {
  display: inline-block;
  padding: 2px 8px;
}
</style>